<template>
  <div id="index" class="flex between">
    <div class="div-left">
      <div class="left-top bgColor">
        <div class="title flex between">
          <div>组织入驻分析</div>
          <div class="title-img"><span></span><span></span><span></span></div>
        </div>
        <div class="flex people-num center">
          <div class="flex num-div between">
            <div><span>0</span></div>
            <div><span>0</span></div>
            <div><span>0</span></div>
            <div><span>1</span></div>
            <div><span>8</span></div>
            <div><span>3</span></div>
            <div><span>3</span></div>
          </div>
          <div class="num-text">人口总数</div>
        </div>
        <div class="diubi flex between">
          <div class="item">
            <div>男性总量</div>
            <div><span>58589</span>人</div>
          </div>
          <div class="item">
            <div>女性总量</div>
            <div><span>58589</span>人</div>
          </div>
        </div>
        <div class="diubi-pro flex">
          <div style="width: 30%"></div>
          <div style="width: 70%"></div>
        </div>
        <div class="diubi-text flex between">
          <div>男性占比 <span>50%</span></div>
          <div>女性占比 <span>50%</span></div>
        </div>
      </div>
      <div class="left-bto bgColor">
        <div class="title flex between">
          <div>党员志愿者入驻分析</div>
          <div class="title-img"><span></span><span></span><span></span></div>
        </div>
        <div class="left-bto-item flex between">
          <div class="item flex centerJ center">
            <img src="@/assets/img/pie.png" class="pie" />
            <div class="item-sum">
              <div>85895</div>
              <div>党员总人数</div>
            </div>
          </div>
          <div class="item">
            <div class="item-con">
              <div>党员志愿者数量</div>
              <div class="flex item-num between">
                <div class="item-num-item">
                  <div>1981</div>
                  <div>男性数量</div>
                </div>
                <div class="item-num-item">
                  <div>2513</div>
                  <div>女性数量</div>
                </div>
              </div>
              <div class="flex between" style="width: 80%; margin: 0 auto">
                <el-progress
                  type="circle"
                  :stroke-width="10"
                  :percentage="50"
                  color="#3BF7CA"
                  width="70"
                >
                </el-progress>
                <el-progress
                  type="circle"
                  :stroke-width="10"
                  :percentage="20"
                  color="#CCCC00"
                  width="70"
                ></el-progress>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-tit">
              <div>月份分析</div>
              <div>1220<span>总人数</span></div>
            </div>
            <div class="chart" id="chart1"></div>
          </div>
          <div class="item">
            <div class="item-tit">
              <div>年份分析</div>
              <div>31870<span>总人数</span></div>
            </div>
            <div class="chart" id="chart2"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="div-center">
      <div class="div-top flex between center">
        <div class="center-item center-item1">
          <div>组织入驻数｜个</div>
          <div>9817</div>
          <!-- <div>
            <img src="@/assets/img/icon.png" style="width:5vw">
          </div> -->
        </div>
        <div class="center-item center-item2">
          <div>组织总人数｜个</div>
          <div>6812</div>
          <!-- <div>            <img src="@/assets/img/icon.png" style="width:5vw"></div> -->
        </div>
        <div class="center-item center-item3">
          <div>帮助活动事件｜件</div>
          <div>121204</div>
          <!-- <div>
            <img src="@/assets/img/icon.png" style="width:5vw">
          </div> -->
        </div>
      </div>
      <div class="div-ce-ce bgColor">
        <div class="title flex between">
          <div>社区分布示意图</div>
          <div class="title-img"><span></span><span></span><span></span></div>
        </div>
        <div class="map-div">
          <img class="map" src="@/assets/img/map.png" />
        </div>
        <div class="shiji">
          <div class="sj_tit">先锋模范事迹</div>
          <div class="people-list">
            <div class="list-item flex between center" @click="toShow">
              <img src="@/assets/img/icon1.png" />
              <div>
                <div class="list-name">姓名 <span>(党员)</span></div>
                <div class="list-info">
                  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                  内容内容内容内容内...
                </div>
              </div>
            </div>
            <div class="list-item flex between center">
              <img src="@/assets/img/icon1.png" />
              <div>
                <div class="list-name">姓名 <span>(党员)</span></div>
                <div class="list-info">
                  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                  内容内容内容内容内...【更多】
                </div>
              </div>
            </div>
            <div class="list-item flex between center">
              <img src="@/assets/img/icon1.png" />
              <div>
                <div class="list-name">姓名 <span>(党员)</span></div>
                <div class="list-info">
                  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                  内容内容内容内容内...【更多】
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="div-right">
      <div class="right-top bgColor">
        <div class="title flex between">
          <div>帮扶困难分析</div>
          <div class="title-img"><span></span><span></span><span></span></div>
        </div>
        <div class="flex between help-main">
          <div class="help-main-item">
            <div class="flex center item1">
              <div>帮扶人数</div>
              <span>较上月上升2人</span>
              <img src="@/assets/img/top1.png" />
            </div>
            <div class="item2">当前<span>5666</span>人</div>
            <div class="item3">当前年累计</div>
            <div class="item4 flex center">
              <div></div>
              <span>8000人</span>
            </div>
            <div class="item3">全部累计</div>
            <div class="item4 item5 flex center">
              <div></div>
              <span>8000人</span>
            </div>
          </div>
          <div class="help-main-item">
            <div class="flex center item1">
              <div>幸福感</div>
              <span style="color: #79ffcf">较上月上升2.6%</span>
              <img src="@/assets/img/top2.png" />
            </div>
            <div class="item2">当前<span>59.2%</span></div>
            <div class="item3">当前年累计</div>
            <div class="item4 flex center">
              <div></div>
              <span>59.2%</span>
            </div>
            <div class="item3">全部累计</div>
            <div class="item4 item5 flex center">
              <div></div>
              <span>44.3%</span>
            </div>
          </div>
        </div>
      </div>
      <div class="right-center bgColor">
        <div class="title flex between">
          <div>社区服务</div>
          <div class="title-img"><span></span><span></span><span></span></div>
        </div>
        <div class="flex between serve-item">
          <div class="serve-item-item">
            <div class="flex center"><span class="span1"></span>人数</div>
            <div class="pie-img flex center centerJ">
              <div>88人</div>
              <img src="@/assets/img/pie2.png" />
            </div>
          </div>
          <div class="serve-item-item">
            <div class="flex center"><span class="span2"></span>次数</div>
            <div class="pie-img flex center centerJ">
              <div>88次</div>
              <img src="@/assets/img/pie3.png" />
            </div>
          </div>
        </div>
      </div>
      <div class="right-bto bgColor">
        <div class="title flex between">
          <div>事件完成次数</div>
          <div class="title-img" style="font-size: 0.9vw">
            当月满意度 95% <span></span><span></span><span></span>
          </div>
        </div>
        <div id="chart3"></div>
      </div>
    </div>
    <!-- 弹窗 -->
    <div class="tanchuan" v-show="show" @click="toCancel">
      <div class="tan-main">
        <div class="tan-ma-name">姓名 <span>(党员)</span></div>
        <div class="tan-ma-main">
          内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  computed: {},
  mounted() {
    this.getChart1();
    this.getChart2();
    this.getChart3();
  },
  methods: {
    toShow() {
      this.show = true;
    },
    toCancel() {
      this.show = false;
    },
    format(percentage) {
      let tex = "占比";
      return percentage + "%\n" + tex;
    },
    getChart1() {
      let that = this;
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
          right: "1%",
          top: "5%",
        },
        color: ["#FFDD00", "#FE0C0C"],
        grid: {
          top: "40%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        xAxis: {
          type: "category",
          data: ["4月", "5月", "6月", "7月", "8月"],
          axisLabel: {
            interval: 0, //使x轴文字显示全
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "男",
            type: "bar",
            data: [10, 22, 12, 41, 32],
          },
          {
            name: "女",
            type: "bar",
            data: [15, 11, 21, 23, 17],
          },
        ],
      };
      var chartDom = document.getElementById("chart1");
      var myChart = this.$echarts.init(chartDom);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      myChart.setOption(option);
    },
    getChart2() {
      let that = this;
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
          right: "1%",
          top: "5%",
        },
        color: ["#FFDD00", "#FE0C0C"],
        grid: {
          top: "40%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        xAxis: {
          type: "category",
          data: ["2018", "2019", "2020", "2021", "2022"],
          axisLabel: {
            interval: 0, //使x轴文字显示全
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "男",
            type: "bar",
            data: [10, 22, 12, 41, 32],
          },
          {
            name: "女",
            type: "bar",
            data: [15, 11, 21, 23, 17],
          },
        ],
      };
      var chartDom = document.getElementById("chart2");
      var myChart = this.$echarts.init(chartDom);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      myChart.setOption(option);
    },
    getChart3() {
      let that = this;
      let option = {
        color: ["rgba(50, 229, 255, 1)", "rgba(250, 207, 18, 1)"],
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     type: "shadow",
        //   },
        // },
        grid: {
          top: "16%",
          left: "0%",
          right: "0%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["2017", "2018", "2019", "2020", "2021", "2022"],
            axisLine: {
              show: true,
              lineStyle: {
                color: "#7B68EE",
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "blue",
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "#FF6347",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#FFDEAD",
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "blue",
                width: 1,
                type: "solid",
              },
            },
            nameTextStyle: {
              rich: {
                legend: {
                  width: 12,
                  height: 4,
                  backgroundColor: "#EE82EE",
                },
                value: {
                  color: "#FF8C00",
                },
              },
            },
          },
          {
            type: "value",
            axisLabel: {
              color: "#00BFFF",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#66CDAA",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#E6E6FA",
                width: 1,
                type: "solid",
              },
            },
            nameTextStyle: {
              rich: {
                legend: {
                  width: 12,
                  height: 4,
                  backgroundColor: "#87CEFA",
                },
                value: {
                  color: "#CD853F",
                },
              },
            },
          },
        ],
        series: [
          {
            name: "事件",
            type: "bar",
            data: [80, 120, 110, 130, 120, 110],
            barWidth: 14, // 柱状图的宽度
            itemStyle: {
              borderRadius: 8,
              color: that.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: "rgba(50, 229, 255, 1)" },
                { offset: 1, color: "rgba(50, 229, 255, 0.8)" },
              ]),
            },
          },
          {
            name: "事件",
            type: "line",
            yAxisIndex: 1,
            data: [80, 120, 110, 130, 120, 110],
            itemStyle: {
              color: that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(183, 75, 238)",
                },
                {
                  offset: 1,
                  color: "rgba(250, 207, 18)",
                },
              ]),
            },
            areaStyle: {
              color: that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(183, 75, 238,0.2)",
                },
                {
                  offset: 1,
                  color: "rgba(250, 207, 18)",
                },
              ]),
            },
            showSymbol: false,
          },
        ],
      };
      var chartDom = document.getElementById("chart3");
      var myChart = this.$echarts.init(chartDom);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      myChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
#index {
  margin: 3vh 1vw;
}
.bgColor {
  background: #ff52133b;
  padding: 1.5vh 1vw 2vh;
}
.title {
  color: white;
  font-size: 1vw;
  .title-img {
    span {
      width: 0.7vw;
      height: 0.7vw;
      display: inline-block;
    }
    span:nth-child(1) {
      background: #d82c00;
    }
    span:nth-child(2) {
      background: #e9775a;
      margin: 0 0.2vw;
    }
    span:nth-child(3) {
      background: #df2e12;
    }
  }
}
.div-left {
  width: 29%;
  .left-top {
    .people-num {
      color: white;
      font-size: 1.2vw;
      margin: 2vh 0;
      .num-div {
        width: 80%;
        div {
          flex: 1;
        }
        span {
          background: #9e3600;
          color: #ebfc03;
          text-align: center;
          display: inline-block;
          width: 80%;
          font-size: 1.8vw;
          padding: 0.5vh 0;
        }
      }
      .num-text {
        width: 20%;
        text-align: right;
      }
    }
    .diubi {
      .item {
        width: 48%;
        text-align: center;
      }
      .item {
        div:nth-child(1) {
          background: #bd3f0c;
          color: white;
          font-size: 1vw;
          line-height: 4.8vh;
          border: solid 1px #f3a70c;
          border-radius: 5px;
        }
        div:nth-child(2) {
          border: solid 1px #f3a70c;
          margin-top: 1vh;
          color: white;
          padding: 1vh 0;
          border-radius: 5px;
          span {
            font-size: 1.8vw;
            color: #ebfc03;
          }
        }
      }
    }
    .diubi-pro {
      height: 3vh;
      margin: 2vh 0 1vh;
      div:nth-child(1) {
        background: #ffc102;
      }
      div:nth-child(2) {
        background: #d74c11;
      }
    }
    .diubi-text {
      font-size: 0.8vw;
      color: white;
      span {
        color: #ffc102;
      }
    }
  }
  .left-bto {
    margin-top: 1.5vh;
    .left-bto-item {
      flex-wrap: wrap;
      .item {
        color: white;
        width: 48%;
        height: 20vh;
        background: #a13b0e;
        margin-top: 2vh;
        position: relative;
        z-index: 2;
        .pie {
          width: 90%;
          position: absolute;
          z-index: -1;
        }
        .item-sum {
          text-align: center;
          color: white;
          font-size: 0.9vw;
          div:nth-child(1) {
            font-size: 1.5vw;
          }
        }
        .item-con {
          margin: 1vh 1vw;
          .item-num {
            margin: 1vh 0;
          }
          .item-num-item {
            width: 50%;
            text-align: center;

            div:nth-child(1) {
              font-size: 1.6vw;
              color: #ffff00;
            }
            div:nth-child(2) {
              font-size: 0.8vw;
            }
          }
          .item-num-item:nth-child(1) {
            border-right: solid 1px #ffff00;
            // text-align: left;
          }
        }
        .chart {
          width: 100%;
          height: 100%;
        }
        .item-tit {
          position: absolute;
          top: 1vh;
          left: 0.5vw;
          div:nth-child(1) {
            font-size: 0.5vw;
          }
          div:nth-child(2) {
            font-size: 1vw;
          }
          span {
            font-size: 0.5vw;
          }
        }
      }
    }
  }
}
.div-center {
  width: 40%;
  position: relative;
  .div-top {
    .center-item {
      width: 30%;
      padding: 2vh 0 2vh 10px;
      color: white;
      div:nth-child(2) {
        font-size: 26px;
        margin: 8px 0 0;
      }
    }
    .center-item1 {
      background: url(../assets/img/bg1.png) no-repeat;
      background-size: 100% 100%;
    }
    .center-item2 {
      background: url(../assets/img/bg2.png) no-repeat;
      background-size: 100% 100%;
    }
    .center-item3 {
      background: url(../assets/img/bg3.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .div-ce-ce {
    margin-top: 2vh;
    .map-div {
      margin: 2vh 0;
      text-align: center;
      .map {
        max-width: 100%;
      }
    }
    .shiji {
      background: #a13b0e;
      padding: 1vh 1vw;

      .sj_tit {
        color: white;
        font-size: 1.1vw;
        margin-bottom: 1vh;
      }
      .people-list {
        color: white;
        height: 13vh;
        overflow-y: scroll;
        .list-item {
          margin-top: 0.5vh;
          img {
            width: 3vw;
            height: 3vw;
            margin-right: 0.5vw;
          }
        }
        .list-name {
          font-size: 0.7vw;
          font-weight: bold;
          span {
            color: #ffdd00;
          }
        }
        .list-info {
          font-size: 0.6vw;
        }
      }
    }
  }
}
.div-right {
  width: 29%;
  .right-top {
    .help-main-item {
      color: white;
      width: 50%;
      .item1 {
        font-size: 1vw;
        margin-top: 1vw;
        span {
          color: #f8686d;
          margin-left: 0.5vw;
        }
        img {
          width: 0.8vw;
          margin-left: 0.2vw;
        }
      }
      .item2 {
        margin-top: 0.5vw;
        font-size: 0.9vw;
        font-weight: 100;
        color: #bca698;
        span {
          font-size: 1.2vw;
          margin: 0 0.5vw;
          font-weight: initial;
          color: white;
        }
      }
      .item3 {
        font-size: 0.7vw;
        font-weight: 100;
        margin-top: 0.5vw;
        color: #bca698;
      }
      .item4 {
        div {
          background: linear-gradient(to right, #6e2c06, #ff6a06);
          width: 70%;
          height: 2vh;
        }
        span {
          margin-left: 0.5vw;
        }
      }
      .item5 {
        div {
          background: linear-gradient(to right, #6e2c06, #f9e700);
          width: 50%;
        }
        span {
          margin-left: 0.5vw;
        }
      }
    }
  }
  .right-center {
    margin: 1vh 0;
    .serve-item {
      color: white;
      margin: 1vh 2vw;
      .serve-item-item {
        width: 43%;
        div:nth-child(1) {
          text-align: right;
          font-size: 10px;
          justify-content: flex-end;
          margin-bottom: 5px;
          span {
            width: 8px;
            height: 8px;
            background: rebeccapurple;
            display: inline-block;
            margin-right: 5px;
          }
          .span1 {
            background: #ffdd00;
          }
          .span2 {
            background: #72d2c0;
          }
        }
        div:nth-child(2) {
          position: relative;
          div {
            position: absolute;
            font-size: 14px;
          }
          img {
            width: 100%;
          }
        }
      }
    }
  }
  #chart3 {
    width: 100%;
    height: 28vh;
  }
}
.tanchuan {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.527);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tan-main {
  color: white;
  width: 60%;
  position: relative;
}
.tan-ma-name {
  background: #c44c24b9;
  text-align: center;
  font-size: 1.5vw;
  line-height: 3;
  span {
    color: #ffdd00;
  }
}
.tan-ma-main {
  background: #c44c24b9;
  font-size: 1.2vw;
  padding: 2vh 3vw;
  margin-top: 1vh;
  min-height: 40vh;
}
</style>
